<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="increment">+1</button>
  <span id="count">0</span>
  <button id="decrement">-1</button>
  <script src="./middleware/logger.js"></script>
  <script src="./middleware/thunk.js"></script>
  <script src="myRedux.js"></script>
  <script>

    function enhancer (createStore) {
      return function (reducer, preloadedState) {
        var store = createStore(reducer, preloadedState)
        var dispatch = store.dispatch
        function _dispatch (action) {
          if (typeof action === 'function') {
            return action(dispatch)
          }
          dispatch(action)
        }
        return {
          ...store,
          dispatch: _dispatch
        }
      }
    }

    function counterReducer (state, action) {
      switch (action.type) {
        case 'increment': 
          return state + 1
        case 'decrement': 
          return state - 1
        default:
          return state
      }
    }

    var rootReducer = combineReducers({ counter: counterReducer })

    var store = createStore(rootReducer, {counter: 0}, applyMiddleware(logger, thunk))

    var actions = bindActionCreators({increment, decrement}, store.dispatch)

    function increment () {
      return { type: 'increment' }
    }

    function decrement () {
      return { type: 'decrement' }
    }

    store.subscribe(() => {
      // document.getElementById('count').innerHTML = store.getState()
      document.getElementById('count').innerHTML = store.getState().counter
    })
    
    document.getElementById('increment').onclick = function () {
      // logger -> thunk -> reducer
      // store.dispatch({ type: 'increment' })
      // store.dispatch(function(dispatch) {
      //   setTimeout(function() {
      //     dispatch({ type: 'increment' })
      //   }, 2000)
      // })
      actions.increment()
    }
    document.getElementById('decrement').onclick = function () {
      store.dispatch({ type: 'decrement' })
    }

  </script>
</body>
</html>